<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加新员工 - HRMS</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- 引入 Bootstrap Datepicker CSS -->
    <link href="<c:url value="/webjars/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css"/>" rel="stylesheet">

    <style>
        .form-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-header {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border-radius: 8px 8px 0 0;
            text-align: center;
        }
        .form-section h5 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }
        .btn-primary {
            transition: background-color 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .loading-spinner {
            display: none;
        }
    </style>
</head>
<body>
<jsp:include page="/WEB-INF/jsp/include/header.jsp"/>

<div class="container">
    <div class="form-container">
        <div class="form-header">
            <h2 class="mb-0">添加新员工</h2>
        </div>

        <c:if test="${not empty error}">
            <div class="alert alert-danger mt-3" role="alert">
                    ${error}
            </div>
        </c:if>

        <form id="addEmployeeForm" action="${pageContext.request.contextPath}/hr/employee/add" method="post" class="needs-validation" novalidate>
            <!-- Basic Information -->
            <div class="form-section">
                <h5 class="mb-3">基本信息</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="empName" class="form-label">姓名</label>
                        <input type="text" class="form-control" id="empName" name="empName" required maxlength="10">
                        <div class="invalid-feedback">请输入姓名（最多10个字符）</div>
                    </div>
                    <div class="col-md-6">
                        <label for="empGender" class="form-label">性别</label>
                        <select class="form-select" id="empGender" name="empGender" required>
                            <option value="">请选择...</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                        <div class="invalid-feedback">请选择性别</div>
                    </div>
                    <!-- 其他字段... -->
                </div>
            </div>

            <!-- 工作信息 -->
            <div class="form-section">
                <h5 class="mb-3">工作信息</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="orgId" class="form-label">部门</label>
                        <select class="form-select" id="orgId" name="orgId" required>
                            <option value="">请选择...</option>
                            <c:forEach items="${organizations}" var="org">
                                <option value="${org.orgId}">${org.orgName}</option>
                            </c:forEach>
                        </select>
                        <div class="invalid-feedback">请选择部门</div>
                    </div>
                    <div class="col-md-6">
                        <label for="empEntryDate" class="form-label">入职日期</label>
                        <input type="text" class="form-control datepicker" id="empEntryDate" name="empEntryDate" required>
                        <div class="invalid-feedback">请选择入职日期</div>
                    </div>
                    <!-- 其他字段... -->
                </div>
            </div>

            <!-- 账号信息 -->
            <div class="form-section">
                <h5 class="mb-3">账号信息</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="empPassword" class="form-label">登录密码</label>
                        <input type="password" class="form-control" id="empPassword" name="empPassword" required minlength="6" maxlength="12">
                        <div class="invalid-feedback">请输入6-12位密码</div>
                    </div>
                    <div class="col-md-6">
                        <label for="confirmPassword" class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required minlength="6" maxlength="12">
                        <div class="invalid-feedback">请再次输入密码</div>
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="${pageContext.request.contextPath}/hr/employee/list" class="btn btn-secondary me-md-2">取消</a>
                <button type="submit" class="btn btn-primary">添加员工</button>
                <div class="spinner-border loading-spinner ms-md-2" role="status"></div>
            </div>
        </form>
    </div>
</div>

<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>

<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>

<!-- 引入 Bootstrap Datepicker JS 和 中文语言包 -->
<script src="<c:url value="/webjars/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"/>"></script>
<script src="<c:url value="/webjars/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"/>"></script>

<script>
    // 初始化日期选择器
    $(document).ready(function() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            autoclose: true
        });

        // 表单验证逻辑
        (function () {
            'use strict';
            var form = document.getElementById('addEmployeeForm');
            var loadingSpinner = document.querySelector('.loading-spinner');

            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                } else {
                    loadingSpinner.style.display = 'inline-block';
                }

                // 检查密码是否一致
                var password = form.querySelector('input[name="empPassword"]');
                var confirmPassword = form.querySelector('input[name="confirmPassword"]');
                if (password.value !== confirmPassword.value) {
                    event.preventDefault();
                    confirmPassword.setCustomValidity('两次输入的密码不一致');
                } else {
                    confirmPassword.setCustomValidity('');
                }

                form.classList.add('was-validated');
            }, false);

            // 密码一致性实时验证
            var confirmPassword = form.querySelector('input[name="confirmPassword"]');
            confirmPassword.addEventListener('input', function() {
                var password = form.querySelector('input[name="empPassword"]').value;
                if (this.value !== password) {
                    this.setCustomValidity('两次输入的密码不一致');
                } else {
                    this.setCustomValidity('');
                }
            });
        })();
    });
</script>
</body>
</html>